@import 'config';
@import 'reset';
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: '微软雅黑'
}
.icon{
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
.clearfix {
  &:after{
    content: '';
    display: block;
    clear: both;
  }
}
#app {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.direction {
    flex-direction: column;
}

.scroll-wrap {
    display: block;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.top-fixed,
.bottom-fixed {
    // position: fixed;
    left: 0;
    width: 100%;
    display: block;
}

.top-fixed {
    top: 0;
}

.bottom-fixed {
    bottom: 0;
}

.panel {
  display: flex;
  align-items: center;
  padding: px2rem(10px);
  background-color: $white;
  border: px2rem(1px) solid darken($light, 5%);
  border-width: px2rem(1px) 0;
  font-size: px2rem(12px);
  &.top{align-items: flex-start;}
  &>.left{
    flex: 1;
    font-size: px2rem(12px);
  }
  &>.right{
    color: $darker;
    .icon{
      color: $gray;
    }
  }
  &>.left + .right{
    margin-left: px2rem(10px);
  }
  &>.flex{
    display: flex;
    align-items: center;
    .main{
      flex: 1;
    }
  }
}
.panel+.panel{
  margin-top: px2rem(-1px);
}
.panel-group {
  margin-bottom: px2rem(5px);
}
.panel + .panel-group {
  margin-top: px2rem(-1px);
}

.product{
  // display: flex;
  &>.left{
    display: flex;
  }
  .thumb {
    width: px2rem(64px);
    height: px2rem(64px);
    border: px2rem(1px) solid $light;
    margin-right: px2rem(10px);
    img{
      width: 100%;
    }
  }
  .price, .num {
    display: block;
    text-align: right;
  }
  .price{
    color: $red;
  }
  .num {
    margin-top: px2rem(5px);
  }
  @at-root &-info{
    flex: 1;
    .title{
      font-size: px2rem(14px); 
      margin-top: px2rem(4px);
      margin-bottom: px2rem(8px);
      color: $black;
    }
    .gift{
      color: $dark;
      margin-bottom: px2rem(5px);
    }
  }
}

.no-info{
 position: absolute;
 top: 40%;
 left: 50%;
 font-size: px2rem(14px);
 transform:translate(-50%, -50%);
 text-align: center;
 color: $darker;
}
